<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			.swiper-container-teacher{
				width: 100%;
				/* height: 12rem; */
				padding-bottom: 0.625rem;
			}
			.major-box{
				margin: 0.625rem 0.625rem;
				padding: 0.625rem 0.3125rem;
				background-color: white;
				border-radius: 0.625rem;
			}
			.major-box .title{
				text-align: center;
				font-weight: bold;
				color: #007DDB;
				margin-bottom: 0.625rem;
			}
			.major-box .sub-title{
				text-align: center;
				color: #007DDB;
				margin-bottom: 0.625rem;
			}
			.major-box .major-item{
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: flex-start;
			}
			.major-box .major-item>div{
				border-radius: 0.325rem;
				margin-top: 0.625rem;
				margin-right: 0.625rem;
				font-size: 0.875rem;
				width: 5rem;
				text-align: center;
				background-color: #1E9FFF;
				color: white;
			}
			.major-box .major-item>img{
				width: 50%;
				margin-top: 0.625rem;
				border-radius: 0.375rem;
			}
			/* 轮播样式 */
			.swiper-container-teacher .swiper-slide{
				position: relative;
			}
			.swiper-container-teacher .swiper-slide>div{
				box-sizing: border-box;
				position: absolute;
				bottom: 0rem;
				left: 0rem;
				width: 100%;
				background-color: rgba(10,10,10,0.5);
				color: white;
				text-align: left;
				padding: 0.2rem 0.4rem;
				border-radius: 0rem 0rem 0.625rem 0.625rem;
			}
			.swiper-container-teacher .swiper-slide .title{
				color: white;
				font-size: 0.875rem;
				font-weight: bold;
				text-align: left;
				margin-bottom: 0.25rem;
			}
			.swiper-container-teacher .swiper-slide>img{
				border-radius: 0.625rem;
			}
			.swiper-container-teacher .swiper-slide .describe{
				font-size: 0.75rem;
				overflow:hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			/* 重写.swiper-pagination 样式 */
			.swiper-pagination-bullet{
				width: 1.25rem;
				border-radius: 0.325rem;
			}
			.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
				bottom: -0.25rem;
			}
			.swiper-pagination-bullet-active{
				background-color: #00eebb;
			}
			.jianjie img{
				max-width: 100%;
			}
		</style>
	</head>
	<body>
	<header>
		<div class="logo-box">
			<div class="logo-name"></div>
			<div class="slogan"></div>
		</div>
		<div class="logo-img">
			<img src="img/true.jpg" >
		</div>
	</header>
		<div class="navbar-box">
			<ul class="navbar">
				<li><a href="index.html">首页</a></li>
				<li><a href="jianjie.html">简介</a></li>
				<li><a href="major.html">专业</a></li>
				<li><a href="shizi.html" class="active">师资</a></li>
				<li><a href="huanjing.html">环境</a></li>
				<li><a href="jiuye.html">就业</a></li>
				<li><a href="xinwen.html">新闻</a></li>
				<li><a href="wenda.html">问答</a></li>
			</ul>
		</div>
		<div class="swiper-container" id="lunbo">
		  <div class="swiper-wrapper">
		   <!-- <div class="swiper-slide"><img src="img/nature-5.jpg" ></div>
		    <div class="swiper-slide"><img src="img/nature-6.jpg" ></div>
		    <div class="swiper-slide"><img src="img/nature-7.jpg" ></div> -->
		  </div>
		  <!-- Add Arrows -->
		  <!-- <div class="swiper-button-next"></div>
		  <div class="swiper-button-prev"></div> -->
		</div>
		<div class="major-box jianjie">
			<div class="title"></div>
			<div class="sub-title"></div>
			<div class="describe jianjie">
				
			</div>
		</div>
		<div id="teachers">
			
		</div>
		<!-- <div class="major-box">
			<div class="title">5G高级软件工程师</div>
			<div class="swiper-container swiper-container-teacher">
			  <div class="swiper-wrapper">
			    <div class="swiper-slide">
						<img src="http://m.cqzuxia.com/static/images/teacher1.png" >
						<div>
							<div class="title">李老师</div>
							<div class="describe">11年软件项目开发</div>
						</div>
					</div>
			  </div>
				<div class="swiper-pagination"></div> 
			</div>
		</div> -->
		<!-- <div class="major-box">
			<div class="title">VR建筑表现大师</div>
			<div class="swiper-container swiper-container-teacher">
				  <div class="swiper-wrapper">
				    <div class="swiper-slide">
							<img src="http://m.cqzuxia.com/static/images/teacher1.png" >
							<div>
								<div class="title">李老师</div>
								<div class="describe">11年软件项目开发</div>
							</div>
						</div>
				  </div>
					<div class="swiper-pagination"></div>
				</div>
		</div> -->
		<!-- 底部导航 -->
		<div id="fixBottom">
			<ul>
				<li class="telzixun"><a href="tel:10000" id="tel"><img src="img/tel.png" ><div>电话咨询</div></a></li>
				<!-- <li class="baoming"><a href="tencent://message/?uin=1014167202&Site=在线QQ&Menu=yes"><img src="img/msg.png"><div>在线报名</div></a></li> -->
				<li class="baoming"><a href="leavemsg.html"><img src="img/msg.png"><div>在线报名</div></a></li>
				<li class="feezixun"><a href="chat.html"><img src="img/qq.png" ><div>报名咨询</div></a></li>
				<li class="feezixun"><a href="chat.html"><img src="img/fee.png" ><div>学费咨询</div></a></li>
				<!-- <li class="qqzixin"><a href="https://wpa1.qq.com/JEFqRGvh?_type=wpa&qidian=true"><img src="img/qq.png" ><div>QQ咨询</div></a></li>
				<li class="feezixun"><a href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img src="img/fee.png" ><div>学费咨询</div></a></li> -->
			</ul>
		</div>
		<footer>
			<div class="" style="padding: 0rem 0.625rem;">
				<div id="address"></div>
				<div><img src="" id="qrcode" ></div>
			</div>
			<div id="beian" style="text-align: center;font-size: 0.75rem;display: block;color: #ccc;"></div>
		</footer>
	</body>
	<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
	<script>

	// 网页轮播
	getLunbo("teacher");
	// 请求服务器数据
	$.ajax({
		url:HOST+"/h5/content/getModuleContent?parentName=teacher",
		success:function(res){
			if(res.code==200){
				// $(".jianjie .sub-title").html(res.msg)
				showJianjie(res.data[0])
				showTeachers(res.data)
			}
		}
	})
	function showJianjie (data) {
		$(".jianjie .title").html(data.key)
		if(data.value.length>0)
		$(".major-box .jianjie").html(data.value[0].content)
		
	}
	function showTeachers (arr) {
		for(let i=1;i<arr.length-1;i++){
			let s=`<div class="major-box">
				<div class="title">${arr[i].key}</div>
				<div class="swiper-container swiper-container-teacher">
					<div class="swiper-wrapper">`;
				for(let j=0;j<arr[i].value.length;j++){
					s+=`<div class="swiper-slide">
						<img src="${HOST}/upload/${arr[i].value[j].content}" >
						<div>
							<div class="title">${arr[i].value[j].title}</div>
							<div class="describe">${arr[i].value[j].description}</div>
						</div>
					</div>`;
				}
				s+=`</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>`;
			$("#teachers").append(s);
		}
		// 老师轮播
		var swiper1 = new Swiper('.swiper-container-teacher', {
			// autoplay: true,//可选选项，自动滑动
		 slidesPerView: 3,
		 spaceBetween: 10,
		 slidesPerGroup: 3,
		 loop: true,
		 loopFillGroupWithBlank: true,
		 pagination: {
			 el: '.swiper-pagination',
			 clickable: true,
		 },
		});
	}
	
	</script>
</html>
